<template>
  <header class="fixed-top" style="z-index: 1">
    <nav class="navbar navbar-expand-lg header">
      <div class="container-fluid">
        <a
          class="navbar-brand"
          href="https://wiki.52poke.com/wiki/%E4%B8%BB%E9%A1%B5"
          target="_blank"
        >
          <img
            src="@/assets/img/pokemon/logo.png"
            alt="Logo"
            width="180"
            height="50"
            class="d-inline-block align-text-top"
          />
          <img
            src="@/assets/img/pokemon/logo.gif"
            alt="Logo"
            width="60"
            height="50"
            class="d-inline-block align-text-top"
          />
        </a>
        <button
          class="navbar-toggler"
          style="border: 1px solid #fff; color: #fff"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="bi bi-list" style="color: #fff"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <div class="navbar-nav me-auto mb-2 mb-lg-0">
            <div
              :data-bs-toggle="windowWidth < 992 ? 'collapse' : ''"
              :data-bs-target="windowWidth < 992 ? '#navbarSupportedContent' : ''"
              v-for="(item, index) in navList"
              :key="index"
              class="px-4 py-2 rounded-1 m-2 nav"
              :class="navClass(index)"
              @click="emit('done', index)"
            >
              {{ item }}
            </div>
          </div>
          <form class="d-flex" role="search">
            <input
              class="form-control me-2"
              type="search"
              placeholder="宝可梦相关内容"
              aria-label="Search"
              v-model="pokemonName"
            />

            <button
              :data-bs-toggle="windowWidth < 992 ? 'collapse' : ''"
              :data-bs-target="windowWidth < 992 ? '#navbarSupportedContent' : ''"
              style="min-width: 100px"
              class="btn btn-warning text-white"
              @click.prevent="goToPokemon"
            >
              Let's Go!
            </button>
          </form>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup lang="ts">
  import { useScreenStore } from '@/stores/screen'
  import { notification } from 'ant-design-vue'
  import { ref } from 'vue'

  const store = useScreenStore()

  const props = defineProps<{
    active?: number
  }>()

  const emit = defineEmits<{
    (e: 'done', active: number): void
  }>()

  const navList = ref<string[]>(['首页', '图鉴', '笔记', '关于'])

  const navClass = (index: number) => {
    if (index === props.active) {
      return 'bg-warning text-white'
    } else {
      return ''
    }
  }

  // 获取屏幕的宽度
  const windowWidth = ref(store.width)

  const pokemonName = ref('')

  const goToPokemon = () => {
    if (!pokemonName.value) {
      notification.open({
        message: '温馨提示',
        description: '宝贝~ 搜索内容不能为空哦~',
        placement: 'topLeft',
        top: '80px',
        duration: 2
      })
      return
    }
    const url = 'http://wiki.52poke.com/wiki/' + pokemonName.value
    window.open(url, '_blank')
  }
</script>

<style scoped>
  .nav {
    cursor: pointer;
    color: #fff;
  }

  @media (min-width: 992px) {
    .nav {
      display: flex;
      min-width: 100px;
      justify-content: center;
    }
  }

  .header {
    background-color: rgba(0, 0, 0, 0.5);
  }

  /* @media (max-width: 992px) {
  .header {
    background-color: rgba(255, 221, 117, 0.719);
    color: #fbbd08;
  }
} */
</style>
